import { IconAlertTriangle } from "~/components/icons"

<MDXHeader title="Tauri" description="Install and configure Tauri." />

<Steps>

### Create project

Start by creating a new Tauri project:

```bash
npm create tauri-app@latest
```

When asked make sure to use Solid:

```txt showLineNumbers
✔ Project name · tauri-app
✔ Choose which language to use for your frontend · TypeScript / JavaScript
✔ Choose your UI template · Solid
✔ Choose your UI flavor · TypeScript
```

### Add Tailwind and its configuration

Install `tailwindcss` and its peer dependencies, then generate your `tailwind.config.js` and `postcss.config.js` files:

```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

### Edit tsconfig.json file

Add the following code to the `tsconfig.json` file to resolve paths:

```ts {4-9}
{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./src/*"
      ]
    }
    // ...
  }
}
```

### Update vite.config.ts

Add the following code to the `vite.config.ts` so your app can resolve paths without error

```bash
# (so you can import "path" without error)
npm i -D @types/node
```

```ts
import path from "path"

import solid from "@vitejs/plugin-solid"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [solid()],
  resolve: {
    alias: {
      "~": path.resolve(__dirname, "./src")
    }
  }
})
```

### Run the CLI

Run the `solidui-cli` init command to setup your project:

```bash
npx solidui-cli@latest init
```

### Configure ui.config.json

You will be asked a few questions to configure `ui.config.json`:

```txt showLineNumbers
Would you like to use TypeScript? (recommended) yes
Where is your global CSS file? src/App.css
Where is your tailwind.config.js located? tailwind.config.js
Configure the import alias for the src directory: ~/*
```

### That's it

You can now start adding components to your project.

```bash
npx solidui-cli@latest add button
```

The command above will add the `Button` component to your project. You can then import it like this:

```tsx {1,6} showLineNumbers
import { Button } from "~/components/ui/button"

export default function App() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}
```

</Steps>

## Integration into existing projects

If you already have a SolidStart, Vite or Astro project with solid-ui set up you can add Tauri by simply following the steps provided [here](https://tauri.app/v1/guides/getting-started/setup/integrate/).
